<template>
	<view class="container">
		<view class="head">
			<view style="" class="sign">Creating</view>
			<view class="sign">Images</view>
			<view class="sign">from Text</view>
			<view style="margin-left: 20upx;color: #ccc;font-weight: bold;margin-top: 20upx;">尽情发挥你的想象，描述想要生成的图片吧！！
			</view>
		</view>
		<view class="middle">
			<view style="display: flex;flex-direction: row;flex:3">
				<view style="font-weight: bold;">图片描述</view>
				<input placeholder="请输入想要生成的图片描述" placeholder-style="margin-left:10upx;color: #C0C0C0;font-size:20upx"
					class="input" v-model="context" />
			</view>

			<text @touchstart="touchStart" @touchend="touchEnd" class="cuIcon-voice" style="font-size: 40rpx;flex:1"
				@click="startRecognize"><text style="font-size: 20upx;">(长按输入语音)</text></text>
		</view>

		<view>
			<button class="btn" @click="createImage()">生成</button>
		</view>
		<swiper class="card-swiper" :indicator-dots="false" :circular="true" :autoplay="true" interval="5000"
			duration="500">
			<swiper-item v-for="(item,index) in swiperList" :key="index">
				<view class="swiper-item">
					<image :src="item.url" mode="aspectFill" v-if="item.type=='image'"></image>
					<image :src="'data:image/jpeg;base64,'+item" v-if="flag==true" mode="aspectFill"></image>
				</view>
			</swiper-item>
		</swiper>
	</view>
</template>

<script>
	import "animate.css"
	var plugin = requirePlugin("WechatSI")
	let manager = plugin.getRecordRecognitionManager();
	export default {
		data() {
			return {
				swiperList: [{
					id: 0,
					type: 'image',
					url: 'https://cdn.openai.com/dall-e/v2/samples/anthropomorphism/091432009673a3a126fdec860933cdce_2.png'
				}, {
					id: 1,
					type: 'image',
					url: 'https://cdn.openai.com/dall-e/v2/samples/product_design/YW4gYXJtY2hhaXIgaW4gdGhlIHNoYXBlIG9mIGFuIGF2b2NhZG8uIGFuIGFybWNoYWlyIGltaXRhdGluZyBhbiBhdm9jYWRvLg==_4.png',
				}, {
					id: 2,
					type: 'image',
					url: 'https://cdn.openai.com/dall-e/v2/samples/im2im_animal/555bab3964e21adc8bb8807c556ede1f_7.png'
				}, {
					id: 3,
					type: 'image',
					url: 'https://cdn.openai.com/dall-e/v2/samples/anthropomorphism/091432009673a3a126fdec860933cdce_26.png'
				}, {
					id: 4,
					type: 'image',
					url: 'https://cdn.openai.com/dall-e/v2/samples/anthropomorphism/091432009673a3a126fdec860933cdce_14.png'
				}, {
					id: 5,
					type: 'image',
					url: 'https://cdn.openai.com/dall-e/v2/samples/product_design/YW4gYXJtY2hhaXIgaW4gdGhlIHNoYXBlIG9mIGFuIGF2b2NhZG8uIGFuIGFybWNoYWlyIGltaXRhdGluZyBhbiBhdm9jYWRvLg==_15.png'
				}],
				context: "",
				flag: false,
			};
		},
		onLoad() {
			this.initRecord();
		},
		methods: {
			createImage() {
				if (this.context == "") {
					uni.showToast({
						title: '生成图片内容请不要为空',
						icon: 'none',
						duration: 2000
					})
					return
				} else {
					uni.showLoading({
						title: '正在生成',
					});
					uni.request({
						url: 'https://main-dalle-server-scy6500.endpoint.ainize.ai/generate',
						method: 'POST',
						data: {
							text: this.context,
							num_images: 5
						},
						header: {
							'Content-Type': 'application/json'
						},
						success: res => {
							this.swiperList = res.data
							this.flag = true
							uni.hideLoading();
						},
						fail: (res) => {
							uni.hideLoading();
							uni.showToast({
								title: '服务器开小差了，请稍后再试',
								icon: 'none',
								duration: 3000
							})
							
							console.log(res)
						}
					})

				}
			},
			touchStart: function() {
				manager.start({
					duration: 60000,
					lang: "en_US",
					// lang: "zh_CN"
				});
			},
			touchEnd: function() {
				uni.showToast({
					title: '识别成功',
					duration: 2000,
					icon: 'success'
				})
				manager.stop();
			},
			initRecord: function() {
				// 开始录音
				manager.onStart = function(res) {
					console.log("成功开始录音识别", res)
					if (res.msg == 'Ok') {
						// 提示用户正在录音
						uni.showToast({
							title: '正在识别语音...',
							duration: 60000,
							icon: 'loading'
						})
					}
				}
				//有新的识别内容返回，则会调用此事件  
				manager.onRecognize = (res) => {
					this.context = res.result;
				}

				// 识别结束事件  
				manager.onStop = (res) => {

					this.context = res.result;
				}

				// 识别错误事件  
				manager.onError = (res) => {

					this.context = res.msg;

				}
			},
		},
	}
</script>

<style lang="scss">
	.container {
		width: 100vw;
		height: 100vh;

		.head {
			overflow: hidden;
			background-color: #F5F5F5;
			width: 100%;
			height: 40%;
			border-bottom-left-radius: 100upx;
			border-bottom-right-radius: 100upx;
			animation: slideInDown 1.2s;

			.sign {
				font-weight: bold;
				font-size: 60upx;
				margin-left: 20upx;
			}
		}

		.middle {
			display: flex;
			flex-direction: row;
			justify-content: space-around;
			margin-top: 50upx;
			animation: slideInLeft 1.2s;
			margin-left: 50upx;

			.input {
				margin-left: 20upx;
				border: 2upx solid #CCC;
				caret-color: #ccc;
				width: 70%;
				//padding: 10upx;
				//height: 50upx;
				//line-height: 60upx;
			}
		}

		.btn {
			margin-top: 60upx;
			font-size: 30upx;
			width: 160upx;
			height: 60upx;
			line-height: 60upx;
			background-color: white;
			animation: fadeIn 1.2s;
		}
	}
</style>
